<template>
	<view>
		<!-- 头部地址选择 -->
		<view class="message">
		  <view class="message-top">
		    <text class="iconfont icon-dingwei"></text>
		    <text>翻斗大街翻斗花园二号楼10001室</text>
		  </view>
		  <view class="message-bottom">
		    <view class="userinfo">
		    <view>胡图图</view>
		    <view>17788430977</view>
		    </view>
		    <view class="address">
		      <text class="iconfont icon-dizhixuanze"></text>
		      <view>地址选择</view>
		    </view>
		  </view>
		</view>
		
		<view class="classify message">
		  <text class="title">选择回收品类</text>
		  <scroll-view scroll-x="true">
		    <view class="bigBox">
		      <view class="item">
		        <view class="Left">
		          <text class="iconfont icon-zhuti"></text>
		        </view>
		        <view class="Right">
		          <text>旧衣物</text>
		          <rich-text nodes="</br>"></rich-text>
		          <text>￥0.3/kg</text>
		        </view>
		      </view>
		      <view class="item">
		        <view class="Left">
		          <text class="iconfont icon-zhuti"></text>
		        </view>
		        <view class="Right">
		          <text>旧衣物</text>
		          <rich-text nodes="</br>"></rich-text>
		          <text>￥0.3/kg</text>
		        </view>
		      </view>
		      <view class="item">
		        <view class="Left">
		          <text class="iconfont icon-zhuti"></text>
		        </view>
		        <view class="Right">
		          <text>旧衣物</text>
		          <rich-text nodes="</br>"></rich-text>
		          <text>￥0.3/kg</text>
		        </view>
		      </view>
		      <view class="item">
		        <view class="Left">
		          <text class="iconfont icon-zhuti"></text>
		        </view>
		        <view class="Right">
		          <text>旧衣物</text>
		          <rich-text nodes="</br>"></rich-text>
		          <text>￥0.3/kg</text>
		        </view>
		      </view>
		    </view>
		  </scroll-view>
		</view>
		
		<view class="message weight">
		  <view class="top">
		    <view class="select">5-10KG</view>
		    <view>10-20KG</view>
		    <view>20-50KG</view>
		    <view>50KG以上</view>
		  </view>
		  <view class="bottom">
		    <view class="income">
		      <view class="income_left">
		      预计收入
		      <text>
		        ￥1.5-5元
		        结算金额以实际为准
		      </text>
		      </view>
		      <view class="income_right">碳减排4-12</view>
		    </view>
		  </view>
		  <view class="push" @tap="goTo">
			  <uni-icons type="plusempty" size="20"color="green"></uni-icons>
		    <view>添加</view>
		  </view>
		</view>
		
		<view class="message flow_path">
		  <view class="title">回收流程</view>
		  <view class="items">
		    <view class="item">
		      <view class="icon">
		        <text class="iconfont icon-xiadan">
		        </text>
		      </view>
		      <view class="point">→</view>
		      <text>手机下单</text>
		    </view>
		    <view class="item">
		      <view class="icon">
		        <text class="iconfont icon-yuyuedingdan">
		        </text>
		      </view>
		      <view class="point">→</view>
		      <text>上门预约</text>
		    </view>
		    <view class="item">
		      <view class="icon">
		        <text class="iconfont icon-shangmen">
		        </text>
		      </view>
		      <view class="point">→</view>
		      <text>上门回收</text>
		    </view>
		    <view class="item">
		      <view class="icon">
		        <text class="iconfont icon-jiesuan">
		        </text>
		      </view>
		      <view class="commit">完成结算</view>
		    </view>
		  </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goTo(){
				uni.navigateTo({
					url:"../../goodsub/reservation_write/reservation_write"
				})
			}
			
		}
	}
</script>

<style>

.message{
  margin-top: 20rpx;
  height: 250rpx;
  background-color:white;
  border-radius: 10%;
}
.message .message-top{
  padding-left: 50rpx;
}

.message-bottom{
  /* border: 1px solid red; */
  padding-top: 80rpx;
  display: flex;
  justify-content:space-around;
}
.address{
  text-align: center;
  width: 120rpx;
  height: 90rpx;
  background-color: #4AC78A;
  border-radius: 15%;
  font-size: 20rpx;
  font-weight: bold;
}

.classify{
  padding: 20rpx 0rpx 0rpx 40rpx;
  background-image: linear-gradient(#FAFCEF , white);
}
.classify .title{
  color: rgb(240,171,40);
  font-size: 35rpx;
  font-weight: bold;
}
scroll-view{
  width: 320px;
  height: 150rpx;
  margin-top: 30rpx;
  /* border: 1px solid red; */
  border-radius: 10%;
}
.bigBox{
  margin-top: 3rpx;
  display: flex;
  width: 700px;
}
.bigBox .item{
  box-shadow:  3rpx 7rpx 13rpx gray;
  border-radius: 10%;
  margin-left: 10rpx;
  /* background-color: red; */
  width: 310rpx;
  height: 140rpx;
  display: flex;
}
.item .Left{
  padding: 42rpx 10rpx 0rpx 25rpx;
}
.Left .iconfont{
  font-size: 35px;
}
.Right{
  text-align: center;
  padding: 30rpx 10rpx 0px 10rpx;
}

.weight{
  height: 370rpx;
}
.weight .top{
  display: flex;
}
.top view{
  background-color: rgb(239,239,239);
  margin: 10rpx 10rpx;
  text-align: center;
  width: 170rpx;
  height: 120rpx;
  border-radius: 30% 30% 0 5rpx;
  line-height: 120rpx;
}
view .select{
  background-color: rgb(26,214,133);
}

.bottom{
  position: relative;
  width: 730rpx;
  border-radius: 0rpx 10rpx 50rpx 50rpx;
  margin-left: 10rpx;
  margin-top: -10px;
  height: 150rpx;
  background-color: rgb(26,214,133);
}

.income{
  display: flex;
  border-radius: 20rpx;
  position: absolute;
  left: 10%;
  top: 10%;
  width: 600rpx;
  height: 120rpx;
  background-color: white;
}

.income_left{
  font-weight: bold;
  padding: 10rpx 0rpx 20rpx 20rpx;
  font-size: 28rpx;
}

.income_left text{
  font-weight: lighter;
  margin-top: 10rpx;
  color: rgb(237,206,120);
  font-size: 25rpx;
}

.income_right{
  position: absolute;
  right: 10rpx;
  bottom: 10rpx;
  color: rgb(179,240,220);
}
.push{
  padding-top: 20rpx;
  padding-left: 50rpx;
  font-size: 45rpx;
  display: flex;
  width: 200rpx;
  height: 50rpx;
  margin: 0 auto;
}
.push view:nth-child(1){
  margin: 10rpx 20rpx 0rpx 0rpx;
  font-size: 60rpx;
  background-color: rgb(26,214,133);
  color: white;
  border-radius: 50%;
}
.push view:nth-child(2){
  margin-top: 5rpx;
  width: 200rpx;
}

.flow_path .title{
  line-height: 80rpx;
  text-align: center;
  color: rgb(211,200,190);
}

.items{
  display: flex;
  justify-content: space-around;
  font-size: 30rpx;
}
.items .item .icon{
  position: relative;
  top: 20rpx;
  margin-left: 20rpx;
  line-height: 60rpx;
  text-align: center;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  background-color: rgb(9, 236, 187);
}
.items .item .icon text{
  font-size: 45rpx;
}

.point{
  top: -30rpx;
  left: 120rpx;
  position: relative;
}

.commit{
  margin-top: 45rpx;
}


</style>
